<template>
        <div id="app">
                    <div class="cashType">
                        <h2>请选择提现类型</h2>
                        <ul class="TypeBox">
                            <li>
                                <div class="typeImg">
                                    <p class="img"><img src="../../../static/img/icon_zhifu@2x.png" alt=""></p>
                                    <p>支付宝</p>
                                    <p v-bind:class="{isOpen:isOpen,isClose:isClose}">{{txtZfb}}</p>
                                </div>
                                <div class="typeControl">
                                    <p>
                                            <span>开启支付</span>
                                            <el-switch v-model="switch0"  on-color="#13ce66" off-color="#ff4949" :disabled='isUseSwitch0'></el-switch>
                                    </p>
                                    <p>
                                        <span>手续费率 :</span>
                                        <el-input placeholder="请输入费率百分比" icon="setting" v-model="input0" :disabled="isInput0" :maxlength='3'></el-input>
                                    </p>
                                </div>
                            </li>
                            <li>
                                             <div class="typeImg">
                                    <p class="img"><img src="../../../static/img/icon_weixin@2x.png" alt=""></p>
                                    <p>微信</p>
                                    <p class="isClose">暂不支持</p>
                                </div>
                                <div class="typeControl">
                                    <p>
                                            <span>开启支付</span>
                                            <el-switch v-model="switch1"  on-color="#13ce66" off-color="#ff4949" :disabled='isUseSwitch1'></el-switch>
                                    </p>
                                    <p>
                                        <span>手续费率 :</span>
                                        <el-input placeholder="请输入费率百分比" icon="setting" v-model="input1" :disabled="isInput1" :maxlength='3'></el-input>
                                    </p>
                                </div>
                            </li>
                            <li>
                                             <div class="typeImg">
                                    <p class="img"><img src="../../../static/img/icon_ka@2x.png" alt=""></p>
                                    <p>银行卡</p>
                                    <p class="isClose">暂不支持</p>
                                </div>
                                <div class="typeControl">
                                    <p>
                                            <span>开启支付</span>
                                            <el-switch v-model="switch2"  on-color="#13ce66" off-color="#ff4949" :disabled='isUseSwitch2'></el-switch>
                                    </p>
                                    <p>
                                        <span>手续费率 :</span>
                                        <el-input placeholder="请输入费率百分比" icon="setting" v-model="input2" :disabled="isInput2" :maxlength='3'></el-input>
                                    </p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    
                    <div class="cashNumber">
                         <h2>请选择提现金额设置</h2>
                         <p>
                             <span>最低金额 : </span>
                             <el-input placeholder="请输入最低提现金额" icon="setting" v-model="input3" :disabled="isInput3"></el-input>
                         </p>
                    </div>
                    <el-button type="info" v-show="isStep0" @click='goEdit'>修改</el-button>
                    <el-button type="success" v-show="isStep1" @click='saveEdit'>保存</el-button><el-button type="danger" v-show="isStep1" @click='cancelEdit'>取消</el-button>
        </div>
</template>
<script>
    import {
        mapActions,
        mapState
    } from 'vuex'

    export default {

        data() {
            return {
                switch0: false,
                switch1: false,
                switch2: false,
                isInput0: true,
                isInput1: true,
                isInput2: true,
                isInput3: true,
                input0: '',
                input1: '',
                input2: '',
                input3: '',
                txtZfb: '未开启',
                isUseSwitch0: true,
                isUseSwitch1: true,
                isUseSwitch2: true,
                isStep0: true,
                isStep1: false,
                isOpen:false,
                isClose:true,
                mainData: []
            }
        },
        watch: {
            switch0: function(i) {
                if (i == true) {
                    this.txtZfb = '已开启'
                    this.isOpen= true;
                    this.isClose = false;
                } else {
                    this.txtZfb = '未开启'
                    this.isOpen= false;
                    this.isClose=true;
                }
            },
        },
        methods: {
            // 获取提现规则
            getRule() {
                this.$store.commit('showLoading');
                let list = {
                    token: sessionStorage.token,
                    code: 'LK_GZ_00007'
                }
                this.getCashRule(list).then((data) => {
                    this.$store.commit('hiddenLoading');
                    console.log(data);
                    if (data.code === 200) {
                        let info = this.mainData = data.data;
                        for (let i = 0; i < info.length; i++) {
                            if (i == 0) {
                                if (info[0].childrenList != null) {
                                    this.switch0 = true;
                                    this.input0 = info[0].childrenList[0].amount;
                                } else {
                                    this.switch0 = false;
                                    this.input0 = '';
                                }
                            } else if (i == 3) {
                                this.input3 = info[3].childrenList[0].amount;
                            }
                        }
                    } else {
                        this.$message(data.message);
                    }
                }).catch(msg => console.log(msg));
            },
            // 修改提现规则
            saveEdit() {
                // 修改费率及开关
                for (var i = 0; i < this.mainData.length-1; i++) {
                        let rate = eval('this.input'+0)
                        if(rate> 100 || rate <= 0 || /[^0-9]/.test(rate)){
                            this.$message.warning('提现费率的值应为0-100之间!');
                            return;
                        }
                        if (eval('this.switch'+i) == true) {
                            for (var j = 0; j < this.mainData.length; j++) {
                                if (this.mainData[j].code == 'LK_GZ_00007_0000'+(i+1)+'') {
                                    if (this.mainData[j].childrenList) {
                                        if (this.mainData[j].childrenList.length > 0) {
                                            this.mainData[j].childrenList[0].amount = eval('this.input'+i);
                                        } else {
                                            var subRatese = {
                                                amount: eval('this.input'+i),
                                                parentId: this.mainData[j].id,
                                                dicName: '费率'
                                            };
                                            this.mainData[j].childrenList.push(subRatese);
                                        }
                                    } else {
                                        var subRatesix = {
                                            amount: eval('this.input'+i),
                                            parentId: this.mainData[j].id,
                                            dicName: '费率'
                                        };
                                        var childlist = [];
                                        childlist.push(subRatesix);
                                        this.mainData[j].childrenList = childlist;
                                    }
                                }
                            }
                        } else {
                            for (var n = 0; n < this.mainData.length; n++) {
                                if (this.mainData[n].code == 'LK_GZ_00007_0000'+(i+1)+'') {
                                    this.mainData[n].childrenList = [];
                                }
                            }
                        }
                }
                // 修改最低额度
                for (var k = 0; k < this.mainData.length; k++) {
                    if (k == 3) {
                        let money = eval('this.input'+k)
                        if(/[^0-9]/.test(money) || money <= 0){
                            this.$message.warning('请输入最低提现金额!');
                            return;
                        }
                        if (this.mainData[k].code == 'LK_GZ_00007_00004') {
                            //最低额度
                            if (this.mainData[k].childrenList) {
                                if (this.mainData[k].childrenList.length > 0) {
                                    this.mainData[k].childrenList[0].amount = this.input3;
                                } else {
                                    var subRated = {
                                        amount: this.input3,
                                        parentId: this.mainData[k].id,
                                        dicName: '最低提现金额'
                                    };
                                    this.mainData[k].childrenList.push(subRated);
                                }
                            } else {
                                var subRateed = {
                                    amount: this.input3,
                                    parentId: this.mainData[k].id,
                                    dicName: '最低提现金额'
                                };
                                var childlisted = [];
                                childlisted.push(subRateed);
                                this.mainData[k].childrenList = childlisted;
                            }
                        }
                    }
                }

                let postData = {
                    token: sessionStorage.token,
                    code: 'LK_GZ_00007',
                    json: JSON.stringify(this.mainData)
                }

                this.updateCashRule(postData).then((data) => {
                    console.log(data);
                    if (data.code === 200) {
                        this.$message.success('修改成功!');
                    } else {
                        this.$message(data.message);
                    }
                    this.isStep1 = false;
                    this.isStep0 = this.isUseSwitch0 = this.isInput0 = this.isInput3 = true;
                    this.getRule();
                }).catch(msg => console.log(msg));
            },
            goEdit() {
                this.isStep1 = true;
                this.isStep0 = this.isUseSwitch0 = this.isInput0 = this.isInput3 = false;
            },
            cancelEdit() {
                this.$confirm('是否取消当前编辑?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.isStep1 = false;
                    this.isStep0 = this.isUseSwitch0 = this.isInput0 = this.isInput3 = true;
                    this.getRule();
                }).catch(() => {});
            },
            ...mapActions(['getCashRule', 'updateCashRule'])
        },
        created: function() {
            this.getRule();
        }

    }

</script>

<style scoped>
    #app {
        position: relative;
    }
    
    ul,
    p,
    label {
        margin: 0;
    }
    .isClose{
        color: gainsboro;
    }
      .isOpen{
        color: #13CE66;
    }
    .cashType {
        width: 100%;
        height: 450px;
        background-color: #fff;
        border-radius: 10px;
        padding: 10px;
    }
    
    h2 {
        text-align: left;
        color: rgb(109, 148, 189);
        border-bottom: 1px solid #ccc;
        height: 60px;
        line-height: 60px;
        margin: 0;
        font-size: 18px;
    }
    
    .TypeBox {
        width: 100%;
        height: 380px;
        padding: 40px 0;
    }
    
    .TypeBox li {
        float: left;
        height: 300px;
        border: 1px solid #ccc;
        width: 20%;
        margin-left: 10%;
        border-radius: 10px;
        padding: 10px;
    }
    
    .typeImg {
        padding: 10px;
        text-align: center;
        border-bottom: 1px solid #ccc;
    }
    
    .img {
        padding: 20px 0 0;
    }
    
    .img img {
        width: 18%;
    }
    
    .typeImg p:nth-child(2) {
        margin-top: 5px;
    }
    
    .typeImg p:nth-child(3) {
        margin-top: 5px;
    }
    
    .typeControl {
        width: 100%;
        padding-top: 20px;
    }
    
    .typeControl p:nth-child(1) {
        height: 23px;
        line-height: 23px;
    }
    
    .typeControl p:nth-child(2) {
        margin-top: 20px;
    }
    
    span {
        float: left;
        font-size: 16px;
    }
    
    .typeControl .el-switch {
        float: right;
    }
    
    .typeControl .el-input {
        margin-top: 15px;
    }
    
    .cashNumber {
        width: 100%;
        height: 140px;
        background-color: #fff;
        border-radius: 10px;
        padding: 10px;
        margin: 20px 0;
    }
    
    .cashNumber p {
        height: 36px;
        line-height: 36px;
        margin-top: 20px;
    }
    
    .cashNumber span {
        float: inherit;
    }
    
    .cashNumber .el-input {
        margin: 0;
        width: 30%;
    }

</style>

